<template>
    <div class="activity-container">
        <div class="section-header">
            <h2 class="section-title">
                <el-icon>
                    <Calendar />
                </el-icon>校园活动
            </h2>
            <router-link to="/activity" class="section-more">
                查看更多<el-icon>
                    <ArrowRight />
                </el-icon>
            </router-link>
        </div>

        <div class="activity-list">
            <div v-for="activity in activityList" :key="activity.id" class="activity-card"
                :class="`status-${activity.status}`">
                <div class="card-image">
                    <el-image :src="activity.imgUrl" fit="cover">
                        <template #error>
                            <div class="image-error">
                                <el-icon>
                                    <Picture />
                                </el-icon>
                            </div>
                        </template>
                    </el-image>
                    <div class="card-badge">
                        <el-tag :type="getStatusType(activity.status)" size="small">
                            {{ activity.status }}
                        </el-tag>
                    </div>
                </div>

                <div class="card-content">
                    <div class="card-header">
                        <h3 class="activity-title">{{ activity.title }}</h3>
                        <div class="activity-meta">
                            <span class="meta-item">
                                <el-icon>
                                    <Clock />
                                </el-icon>
                                {{ formatDate(activity.startTime) }}
                            </span>
                            <span class="meta-item">
                                <el-icon>
                                    <Location />
                                </el-icon>
                                {{ activity.address }}
                            </span>
                        </div>
                    </div>

                    <div class="progress-container">
                        <div class="progress-text">
                            <span>已报名 {{ activity.signedPeople }}/{{ activity.expectedPeople }}</span>
                            <span>{{ Math.round((activity.signedPeople / activity.expectedPeople) * 100) }}%</span>
                        </div>
                        <el-progress :percentage="(activity.signedPeople / activity.expectedPeople) * 100"
                            :show-text="false" :stroke-width="6" :color="getProgressColor(activity)" />
                    </div>

                    <div class="tag-container">
                        <el-tag v-for="(tag, index) in activity.tags" :key="index" size="small"
                            :type="['', 'success', 'info', 'warning', 'danger'][index % 5]">
                            {{ tag }}
                        </el-tag>
                    </div>

                    <div class="card-footer">
                        <el-button type="primary" size="small" @click="handleSignUp(activity)"
                            :disabled="activity.status !== '进行中'">
                            立即报名
                        </el-button>
                        <el-button text size="small" @click="showDetail(activity)">
                            查看详情
                        </el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
    Calendar, ArrowRight, Picture, Clock, Location
} from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import { useRouter } from 'vue-router'
const router = useRouter()
const activityList = ref([
    {
        id: 1,
        title: '校园开放日',
        imgUrl: 'https://agoni-web.oss-cn-beijing.aliyuncs.com/activity1.jpg',
        startTime: '2023-06-10 19:00:00',
        endTime: '2023-06-10 22:00:00',
        address: '学校大礼堂',
        status: '进行中',
        expectedPeople: 200,
        signedPeople: 148,
        desc: '一年一度的校园开放日活动',
        text: '欢迎各位同学和家长参加我们的校园开放日，了解学校教学环境和特色课程',
        createdBy: 'admin',
        contact: '13812345678',
        type: '线下活动',
        tags: ['开放日', '校园文化', '招生'],
        createTime: '2023-05-20 10:00:00',
    },
    {
        id: 2,
        title: '编程马拉松',
        imgUrl: 'https://agoni-web.oss-cn-beijing.aliyuncs.com/hackathon.jpg',
        startTime: '2023-06-15 09:00:00',
        endTime: '2023-06-16 18:00:00',
        address: '计算机学院实验室',
        status: '报名中',
        expectedPeople: 50,
        signedPeople: 32,
        desc: '24小时编程挑战赛',
        text: '组队参加24小时编程挑战，赢取丰厚奖品和实习机会',
        createdBy: 'cs_club',
        contact: '13987654321',
        type: '线下活动',
        tags: ['编程', '比赛', '技术'],
        createTime: '2023-05-25 14:30:00',
    },
    {
        id: 3,
        title: '职业规划讲座',
        imgUrl: 'https://agoni-web.oss-cn-beijing.aliyuncs.com/career.jpg',
        startTime: '2023-06-08 14:00:00',
        endTime: '2023-06-08 16:00:00',
        address: '线上腾讯会议',
        status: '已结束',
        expectedPeople: 300,
        signedPeople: 276,
        desc: '知名企业HR职业规划分享',
        text: '邀请多位知名企业HR分享行业趋势和职业规划建议',
        createdBy: 'career_center',
        contact: '13712345678',
        type: '线上活动',
        tags: ['职业', '讲座', '就业'],
        createTime: '2023-05-15 09:00:00',
    }
])

const getStatusType = (status: string) => {
    switch (status) {
        case '报名中': return 'warning'
        case '进行中': return 'success'
        case '已结束': return 'info'
        default: return ''
    }
}

const getProgressColor = (activity: any) => {
    const percent = (activity.signedPeople / activity.expectedPeople) * 100
    if (percent >= 80) return '#f56c6c'
    if (percent >= 50) return '#e6a23c'
    return '#67c23a'
}

const formatDate = (dateStr: string) => {
    return dayjs(dateStr).format('MM月DD日 HH:mm')
}

const handleSignUp = (activity: any) => {
    console.log('报名活动:', activity.id)
    // 实际项目中调用报名API
}

const showDetail = (activity: any) => {
    console.log('查看详情:', activity.id)
    router.push({ name: 'activityDetail', params: { id: activity.id } })
}
</script>

<style scoped>
.activity-container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.section-title {
    display: flex;
    align-items: center;
    font-size: 22px;
    color: #333;
    margin-bottom: 20px;
}

.section-title .el-icon {
    display: flex;
    margin-right: 10px;
    align-items: center;
    font-size: 24px;
    justify-content: space-between;
}

.activity-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.activity-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    background: white;
}

.activity-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.card-image {
    position: relative;
    height: 180px;
    overflow: hidden;
}

.card-image .el-image {
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;
}

.activity-card:hover .el-image {
    transform: scale(1.05);
}

.card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
}

.image-error {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    color: #999;
}

.card-content {
    padding: 16px;
}

.card-header {
    margin-bottom: 16px;
}

.activity-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
}

.activity-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: #666;
}

.meta-item {
    display: flex;
    align-items: center;
}

.meta-item .el-icon {
    margin-right: 4px;
    font-size: 14px;
}

.progress-container {
    margin: 16px 0;
}

.progress-text {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #666;
    margin-bottom: 6px;
}

.tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    padding-top: 8px;
}

/* 不同状态卡片样式 */
.activity-card.status-进行中 {
    border-top: 3px solid #67c23a;
}

.activity-card.status-报名中 {
    border-top: 3px solid #e6a23c;
}

.activity-card.status-已结束 {
    border-top: 3px solid #909399;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.section-title {
    display: flex;
    align-items: center;
    font-size: 22px;
    color: #333;
    margin: 0;
    /* 移除原来的margin-bottom */
}

.section-more {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #666;
    text-decoration: none;
    transition: all 0.3s;
}

.section-more:hover {
    color: var(--el-color-primary);
}

.section-more .el-icon {
    margin-left: 5px;
    font-size: 14px;
}
</style>